Ext.onReady(function() {
			var store = Ext.create('Ext.data.JsonStore', {
						fields : [{name:'rid'},{name:'rname'},{name:'remark'}],
						pageSize : 20, // 每页多少条
						proxy : {
							type : 'ajax',
							url : 'getAllRoleByPage.do',
							reader : {
								type : 'json',
								root : 'root',
								totalProperty : 'total'
							}
						}
					});
			store.loadPage(1);
			// 查询表单
			var sform = Ext.create('Ext.form.Panel', {
						height : 40,
						frame : true,
						layout : {
							type : 'hbox',
							align : 'middle'
						},
						region : 'north',
						items : [{
									xtype : 'textfield',
									labelAlign : 'right',
									labelWidth : 40,
									fieldLabel : '',
									name : ''
								}, {
									xtype : 'button',
									margin : '0 0 0 10',
									iconCls : 'button-search',
									text : '查询',
									handler : sear
								}, {
									xtype : 'button',
									text : '刷新',
									margin : '0 0 0 10',
									iconCls : 'button-refresh',
									handler : function() {
										window.location.reload();
									}
								}]
					});
			function sear() {
				var values = sform.getForm().getValues();
				store.proxy.extraParams = values;
				store.loadPage(1);
			}
			//添加表单
			var saveform = Ext.create('Ext.form.Panel', {
						url : 'saverole.do',
						frame : true,
						layout : 'auto',
						defaults : {
							xtype : 'textfield',
							labelAlign : 'right',
							labelWidth : 60
						},
						items : [{
									fieldLabel : '角色',
									name : 'rname'
								}, {
									fieldLabel : '说明',
									name : 'remark'
								}]
					});
			//添加窗口
			var savewin = function() {
				Ext.create('Ext.window.Window', {
							title : '',
							layout : 'fit',
							buttonAlign : 'center',
							closable : true,
							closeAction : 'close',
							height : 180,
							width : 300,
							items : [saveform],
							buttons : [{
										text : '确定',
										iconCls : 'button-accept',
										handler : function() {
											saveform.getForm().submit();
											this.up('window').close();
										}
									}, {
										text : '重置',
										handler : function() {
											saveform.getForm().reset();
										}
									}]
						}).show();
			};
			// 中央表格面板
			var selModel = Ext.create('Ext.selection.CheckboxModel',{injectChectbox : 'first'});
			var grid = Ext.create('Ext.grid.Panel', {
						region : 'center',
						columnLines : true,
						selModel : selModel,
						store : store,// 必须配置
						tbar : [{
									xtype : 'button',
									text : '添加',
									iconCls : 'button-add',
									handler : savewin
								}, {
									xtype : 'button',
									text : '删除',
									iconCls : 'button-remove'
								}],
						columns : [{
									header : 'ID',
									dataIndex : 'rid'
								}, {
									header : '角色名称',
									dataIndex : 'rname'
								}, {
									header : '角色说明',
									dataIndex : 'remark'
								}],
						dockedItems : [{
									xtype : 'pagingtoolbar',
									store : store, //分页数据使用跟gridPanel同样的数据
									dock : 'bottom',
									displayMsg : '显示{0}-{1}条,共{2}条',
									emptyMsg : "没有数据",
									beforePageText : '第',
									afterPageText : '页共{0}页',
									displayInfo : true
								}]
					});
			Ext.create('Ext.Viewport', {
						title : '主要内容',
						layout : 'border',
						items : [sform, grid],
						renderTo : Ext.getBody()
					});
		});
